<template>
    <div class="exam-container">
      <el-skeleton :loading="data.isFirst" :rows="14" animated>
      <div class="content">
        <div class="top">
          <el-button type="primary" @click="() => router.push('/organization/zhiwu/add')"
            >新增</el-button
          >
  
          <!-- <div style="margin-right: 10px">
            <el-tag>右击组织右侧图标可以对组织进行新增/详情/删除哦</el-tag>
          </div> -->
        </div>
  
        <div class="mian-content">
          <el-row :gutter="20">
        
            <el-col :span="24">
              <div style="margin-top: 10px">
                <el-table :data="tableData" v-loading="data.isLoad" :border="true">
                  <el-table-column label="序号" type="index" width="60px"></el-table-column>
                  <el-table-column
                    label="职务名"
                    prop="name"
                    :show-overflow-tooltip="true"
                    class="last_commoner"
                  >
                  </el-table-column>
  
                  <el-table-column
                    label="等级"
                    prop="lv"
                    :show-overflow-tooltip="true"
                    class="last_commoner"
                  >
                  </el-table-column>
  
                  <el-table-column
                    label="禁用"
                    prop="name"
                    :show-overflow-tooltip="true"
                    class="last_commoner"
                  >
                    <template #default="scope">
                      <el-tag type="success" size="small"
                      v-if="scope.row.isBan==0"
                        >否</el-tag
                      >

                      <el-tag type="danger" size="small"
                      v-else
                        >是</el-tag
                      >
                    </template>
                  </el-table-column>
  
                  <el-table-column
                    label="使用"
                    prop="useCount"
                    :show-overflow-tooltip="true"
                    class="last_commoner"
                  >
                  </el-table-column>

                  <el-table-column
                    label="添加时间"
                    prop="createTime"
                    :show-overflow-tooltip="true"
                    class="last_commoner"
                  >
                  </el-table-column>


  
                  <el-table-column label="操作" fixed="right" width="200">
                      <template #default="scope">
                        <el-button type="primary"  @click="() => router.push(`/organization/zhiwu/detail/${scope.row.id}`)">详情</el-button>
                        
                        
                        <el-popconfirm
                title="确认禁用吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteZW(scope.row)"
                v-if="scope.row.useCount!=0"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    :loading="btnLoad"
                    >禁用</el-button
                  >
                </template>
              </el-popconfirm>


              <el-popconfirm
                title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteZW(scope.row)"
                v-if="scope.row.useCount==0"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    plain
                    :loading="btnLoad"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>


                        <!-- <el-button type="danger" plain v-if="scope.row.useCount==0" @click="deleteZW(scope.row)">删除</el-button>   -->
                        <!-- <el-button type="danger" v-if="scope.row.useCount!=0">禁用</el-button>      -->
                      </template>
                </el-table-column>
                </el-table>
  
                <!-- 分页 -->
                <div style="margin-top: 10px; padding-bottom: 10px">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="data.pages.total"
                    small
                    :page-size="data.pages.limit"
                    v-model:current-page="data.pages.page"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-skeleton>
    </div>
  </template>
  
  
  
  <script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { onMounted, reactive, ref, toRefs, watchEffect } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import {getZhiwuList,deleteZhiwu} from '../../api/org'
  import { closeLoad, openLoad } from '@/utils/loading';
  const router = useRouter();
  const routes = useRoute();

  //页面数据  表格数据默认行知数据
  const data = reactive({
    isLoad: false,
    tableData:[],
    pages: {
      limit: 10,
      page: 1,
      total: 0
    },
    isFirst:true
  })
  
  //删除职务
  const deleteZW=(r:any)=>{
    data.isLoad=true;
    deleteZhiwu({ids:[r.id]}).then((res:any)=>{
        if(res.result===0){
            ElMessage.success(res.message);
            getZhiwuLists();
        }else{
            data.isLoad=false;
            ElMessage.error(res.message);
        }         
    })
  }
  
 /**
       * 获取所有职务
       */
      const getZhiwuLists=()=> {
        data.isLoad=true;
        getZhiwuList({ limit: data.pages.limit, page: data.pages.page }).then((res: any) => {
          data.tableData = res.data.data;
          data.pages.total=res.data.total;
          data.isFirst=false;
          data.isLoad=false;
        })
      }
  


  const { tableData } = toRefs(data)
  
  onMounted(() => {
    getZhiwuLists();
  })
  
  watchEffect(() => {
    getZhiwuLists()
  })
  </script>
  
  
  <style scoped>
  .content {
    padding: 5px;
  }
  
  .top {
    border: 1px solid #eee;
    height: 50px;
    padding-left: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
  }
  
  .left {
    margin: 0;
    margin-top: 10px;
  }
  </style>